<template>
	<view class="wrapper">
		<view class="user_box" @tap="$open('../friend/friend?userId='+val.userId)" v-for="(val, index) in friendList" :key="index">
			<dimg :src="val.userId | avatar" class="user_activity"></dimg>
			<!-- <view class="user_name f32">{{val.nickname}}</view> -->
			<view class="user_info center">
				<dimg :src="val.userId | avatar" class="user_avatar"></dimg>
				<view class="user_main flex">
					<view class="f28">{{val.nickname}} </view>
					<view class="f22">{{val.createTime | time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			pageIndex: 0,
			friendList: []
		};
	},
	onReachBottom() {
		this.pageIndex++;
		this.searchFriend();
	},
	onLoad(e) {
		this.id = e.id;
		this.searchFriend();
	},
	methods: {
		searchFriend() {
			let that = this;
			that.$ajax(that.apiList.searchFriend, {
				nickname: that.id,
				pageIndex: that.pageIndex,
				pageSize: 20,
			},'GET').then(res => {
				// uni.getLocation({
				// 	type:'gcj02',
				// 	success(e) {
				// 		res.data.forEach(item => {
				// 			let lat1= e.latitude
				// 			let lng1=e.longitude
				// 			let lat2=item.loc.lat
				// 			let lng2=item.loc.lng
				// 			let radLat1 = lat1*Math.PI / 180.0;
				// 			let radLat2 = lat2*Math.PI / 180.0;
				// 			let a = radLat1 - radLat2;
				// 			let b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
				// 			let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
				// 			Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
				// 			s = s *6378.137 ;
				// 			return item.s = Math.round(s * 10000) / 10000;
				// 		})
						that.friendList=that.friendList.concat(res.data);
				// 	}
				// })
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f3f3f3;
	.wrapper {
		padding: 15rpx;
	}
	.user_box {
		width: 330rpx;
		background: #ffffff;
		border-radius: 8rpx;
		overflow: hidden;
		margin: 15rpx;
		padding-bottom: 25rpx;
		display: inline-block;
		.f28 {
			margin-bottom: 10rpx;
		}
		.user_avatar {
			width: 76rpx;
			height: 75rpx;
			border-radius: 50%;
			margin: 0 23rpx 0 20rpx;
			border-radius: 50%;
			overflow: hidden;
		}
		.user_name {
			padding: 25rpx 22rpx 20rpx;
		}
		.user_activity {
			width: 330rpx;
			height: 330rpx;
			margin-bottom: 20rpx;
		}
	}
}
</style>
